<!DOCTYPE html>
<html lang="en">
<head>
	<title>京东</title>
	<meta charset="utf-8">


	<!-- 通过外链接引入 css样式 -->
	<link rel="stylesheet" type="text/css" href="jd.css">
	<!-- 写javaScript代码 -->
	<script type="text/javascript">

		/*显示的方法*/
		function show(index) {
			// body...
			jd_content_left_detail.style.display='block';
			// document.write("<h1>这是一"+index+"个标题</h1>")

			// 获取当前选中标签的内容


			document.getElementById("jd_content_left_detail").innerHTML="<h1>这是一"+index+"个标题</h1>";
		}

		/*隐藏的方法*/
		function hide() {
			// body...
			jd_content_left_detail.style.display='none';

		}

	</script>

</head>
<body>

	<!-- 最外层的块元素 -->
	<div id="jd_mian">

		<!-- 顶部栏 -->
		<div id="jd_top">

		</div>
        <tr>
			<!-- 顶部下面的收索框 -->
		<div id="jd_search">
            <div id="jd_main">
		    </div>
		</div>
		</tr>




		<!-- 搜索下面的内容布局 -->
		<div id="jd_content">

			<!-- 内容左边的div -->
			<div id="jd_content_left">

				<!-- 无序列表的使用 -->
				<ul class="jd_content_left_ul">

					<li onmouseover="show(1)" onmouseout="hide()"><a href="">家用电器</a></li>
					<li onmouseover="show(2)" onmouseout="hide()"><a href="">手机</a></li>
					<li onmouseover="show(3)" onmouseout="hide()"><a href="">电脑</a></li>
					<li onmouseover="show(4)" onmouseout="hide()"><a href="">家具</a></li>
					<li onmouseover="show(5)" onmouseout="hide()"><a href="">男装</a></li>
					<li onmouseover="show(6)" onmouseout="hide()"><a href="">化妆</a></li>
					<li onmouseover="show(7)" onmouseout="hide()"><a href="">鞋子</a></li>
					<li onmouseover="show(8)" onmouseout="hide()"><a href="">运动</a></li>
					<li onmouseover="show(9)" onmouseout="hide()"><a href="">汽车</a></li>
					<li onmouseover="show(10)" onmouseout="hide()"><a href="">母婴</a></li>
					<li onmouseover="show(11)" onmouseout="hide()"><a href="">食品</a></li>
					<li onmouseover="show(12)" onmouseout="hide()"><a href="">医药</a></li>
					<li onmouseover="show(13)" onmouseout="hide()"><a href="">图书</a></li>
					<li onmouseover="show(14)" onmouseout="hide()"><a href="">机票</a></li>
					<li onmouseover="show(15)" onmouseout="hide()"><a href="">理财</a></li>

				</ul>

			</div>

			<!-- 鼠标点击在左侧的栏目上的时候的详情 -->
			<div id="jd_content_left_detail">


			</div>

			<!-- 内容中间的的div -->
			<div id="jd_content_center">

				<!-- 中间的 上部 -->
				<div id="jd_content_center_top">

				</div>

				<!-- 中间的下部左边 -->
				<div id="jd_content_center_left">
					<img id = "jd_content_center_left_img">
				</div>

				<!-- 中间的下部右边 -->
				<div id="jd_content_center_right">

					<!-- 图片链接 -->
					<img  id = "jd_content_center_right_img">
				</div>


			</div>



			<!-- 内容有边的的div -->
			<div id="jd_content_right">

			</div>

		</div>

		<!-- 京东秒杀专区 -->


		<div id="jd_seckill_prefecture">
              <div id="jd_top_miaosha">

			  </div>
			<div id="jd_seckill_prefecture_first">

				<img src="qingfeng.jpg" >

				<p>[京东超市]清风（APP）抽纸原木纯品金装系列 3层150抽</p>

				<p><span style="color:red;font-size: 20px">¥54.90</span> <span style="color:gray;font-size: 14px;text-decoration: line-through;margin-left: 10px;">¥59.00</span></p>

				<!-- 左上角的图 -->
			 </div>
			<div id="jd_seckill_prefecture_two">
				<img src="pingban.jpg">
				<p>Apple iPad mini4 平板电脑7.9英寸（128GWLAN版/A8芯片）</p>
                <p><span style="color:red;font-size: 20px">¥3298.00</span> <span style="color:gray;font-size: 14px;text-decoration: line-through;margin-left: 10px;">¥3688.00</span></p>
			</div>


		</div>

	</div>

</body>
</html>